<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
      <div class="arrow-down-img" :class="{'arrow-up-img': showDropDown}"/>
    </div>
    <div class="drop-down-wrapper" v-show="showDropDown">
      <div class="li-single-filter-wrapper ul-single-filter-wrapper">
        <ul class="ul-filter-list-wrapper">
          <div v-if="type=='hospLevel'">
            <ul v-for="(item,index) in dataList">
              <li>
                <div class="check-box-wrapper" @click="itemClick(item, index)">
                  <span class="left-check-icon" :class="item.isChecked ? 'check-left-check-icon' :''"></span>
                  <p class="right-text">{{item.selectName}}</p>
                </div>
              </li>
            </ul>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {bus} from './js/bus.js';

  const TAG = 'singleListFilter'
  export default {
    props: {
      singleListData: {
        type: Array,
        default () {
          return []
        }
      },
      defaultText: {
        type: String,
        default () {
          return '请选择'
        }
      },
      filter: {
        type: Array,
        default: []
      },
      type: {
        type: String,
        default: null
      },
      isReset: {
        type: Boolean,
        default () {
          return false
        }
      },
      defaultSelectAll: {
        type: Boolean,
        default () {
          return true
        }
      }
    },
    created () {
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
        } else {
          this.showDropDown = false
        }
      });
    },

    data () {
      return {
        placeHolderText: this.defaultText,
        showDropDown: false,
        dataList: [],
      }
    },
    methods: {
      itemClick (val, index) {
        let data = JSON.parse(JSON.stringify(this.dataList));

        if (index === 0) { // 点击全部
          let isSelected = val.isChecked = !val.isChecked;
          data.map((item, idx) => {
            item.isChecked = isSelected;
          });
        } else {
          var len = 0;
          data.map((item, idx) => {
            if (idx === index) {
              item.isChecked = !item.isChecked;
            }

            if (item.isChecked) {
              len++;
            }
          });

          data[0].isChecked = ((len === data.length - 1) && data[0].isChecked == false);
        }


        this.dataList = data;
        this.callBackSelect();
      },

      getOnlyCode () {
        return this._uid
      },
      showSingleListDialog () {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      clickBlank () {

      },
      getDataFromFilter () {
        let dataList = {};

        dataList = this.filter;

        this.dataList = dataList;
      },
      selectAll () {
        let data = JSON.parse(JSON.stringify(this.dataList));

        let isSelected = true;
        data.map((item, idx) => {
          item.isChecked = isSelected;
        });

        this.dataList = data;

        this.callBackSelect();
      },
      callBackSelect () {
        let tempData = JSON.parse(JSON.stringify(this.dataList));
        this.$emit('confirmSingleSelect', tempData);
      }
    },
    mounted () {
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });
      if (this.filter) {
        this.getDataFromFilter();
        this.selectAll();
      }
    },
    watch: {
      showDropDown (val) {
        this.callBackSelect();
      },
      filter (val) {
        if (val) {
          this.getDataFromFilter();
          this.selectAll();
        }
      },
      isReset (val) {
        this.selectAll();
      }
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

  .left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("./check-box/no_checkmark.png");
  }

  .check-left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("./check-box/checkmark.png");
  }

  .right-text {
    display: inline-block;
    margin-left: 6px;
  }

  .check-box-wrapper {
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

</style>
